<script setup>
import {useIndexStore} from '@/store/main';
import {useUserStore} from "@/store/user";
import {Check} from '@element-plus/icons-vue'

import {Phone, VideoCamera, MoreFilled} from '@element-plus/icons-vue'
import dayjs from "dayjs";
import DialogCall from "@/components/pc/dialog-call.vue";

const indexStore = useIndexStore()
const userStore = useUserStore()
const socket = indexStore.get_socket()
socket.on('receive_msg', msg => {
  userStore.set_message_list(msg.user, msg.to_user)
})
// 按键发送消息
const on_key_send = (e) => {
  if (indexStore.send_way === 'enter') {
    if (e.key === 'Enter') {
      e.preventDefault();
      // 发送
      socket.emit('send_msg', userStore.message)
      userStore.message['title'] = ''
    }
  } else {
    if (e.ctrlKey && e.key === 'Enter') {
      // 发送
      socket.emit('send_msg', userStore.message)
      userStore.message['title'] =''
    }
  }
}
// 发送
const on_send = () => {
  socket.emit('send_msg', userStore.message)
  userStore.message.title = ''
}

//
const formatMessageDate = (timestamp) => {
  const today = dayjs().startOf('day');
  const messageDate = dayjs(timestamp);
  if (today.isSame(messageDate, 'day')) {
    return dayjs(timestamp).format('HH:mm');
  } else {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm');
  }
}
// 时间显示
const shouldDisplayTime = (index) => {
  if (index === 0) {
    return true; // 显示第一条消息的时间戳
  }

  const currentMessage = userStore.message_list[index];
  const previousMessage = userStore.message_list[index - 1];

  const currentTimestamp = dayjs(currentMessage.createdAtTimestamp);
  const previousTimestamp = dayjs(previousMessage.createdAtTimestamp);

  const diffMinutes = currentTimestamp.diff(previousTimestamp, 'minute');

  return diffMinutes > 5; // 如果和上一条消息相差超过5分钟，则显示时间戳
}
</script>

<template>
  <div @click="indexStore.close_search()" class="w-full bg-bule-200 h-full flex flex-col">
    <div class="bg-white w-full basis-1/12 flex items-center justify-between border-b-2 ">
      <div>{{ userStore.to_user.name }}</div>
      <div class="flex *:m-2">
        <div class="w-10 h-10 flex justify-center items-center rounded-full m-2 cursor-pointer hover:bg-blue-200">
          <dialog-call/>
        </div>
        <div class="w-10 h-10 flex justify-center items-center rounded-full m-2 cursor-pointer hover:bg-blue-200">
          <el-icon :size="30">
            <VideoCamera/>
          </el-icon>
        </div>
        <div class="w-10 h-10 flex justify-center items-center rounded-full m-2 cursor-pointer hover:bg-blue-200">
          <el-icon :size="30">
            <MoreFilled/>
          </el-icon>
        </div>
      </div>
    </div>
    <div class="w-full basis-9/12 border overflow-auto">
      <template v-for="(message, index) in userStore.message_list" :key="index">
        <template v-if="message.to_user[0]._id === userStore.user._id">
          <!-- 对方发送的消息 -->
          <template v-if="shouldDisplayTime(index)">
            <div class="text-center text-xs text-gray-400 mb-2">{{
                formatMessageDate(message.createdAt)
              }}
            </div>
          </template>
          <div class="flex justify-between">
            <div class="flex p-5 text-[20px]">
              <div class="flex justify-center items-center">
                <el-avatar :size="40" :src="message.user[0].avatar"/>
              </div>
              <div class="m-2 rounded-xl p-2 border h-10 flex justify-center items-center">
                <div class="flex flex-wrap">{{ message.title }}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="message.user[0]._id === userStore.user._id">
          <!-- 当前用户发送的消息 -->
          <template v-if="shouldDisplayTime(index)">
            <div class="text-center text-xs text-gray-400 mb-2">{{
                formatMessageDate(message.createdAt)
              }}
            </div>
          </template>
          <div class="flex justify-between">
            <div></div>
            <div class="flex p-5 text-[20px]">
              <div class="m-2 rounded-xl p-2 border h-10 flex justify-center items-center">
                <div>{{ message.title }}</div>
              </div>
              <div class="flex justify-center items-center">
                <el-avatar :size="40" :src="message.user[0].avatar"/>
              </div>
            </div>
          </div>
        </template>
      </template>
    </div>
    <div class="w-full basis-2/12 border" style="position: relative">
      <textarea v-model="userStore.message.title" @keydown="on_key_send" class="w-full p-5" style="height:160px"/>
      <div style="position: absolute;right: 20px;bottom: 20px">
        <el-dropdown trigger="click" split-button @click="on_send">
          发送
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="indexStore.send_way = 'enter'">
                <el-icon v-if="indexStore.send_way === 'enter' ">
                  <Check/>
                </el-icon>
                按Enter发送
              </el-dropdown-item>
              <el-dropdown-item @click="indexStore.send_way = 'shift+enter'">
                <el-icon v-if="indexStore.send_way === 'shift+enter' ">
                  <Check/>
                </el-icon>
                按Ctrl + Enter发送
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>